<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>浮动</title>
	<style>
		*{
			padding: 0;
			margin: 0;
			box-sizing: border-box;
			list-style: none;
			text-decoration: none;
		}
		
		ul{
			background-color: bisque;
			/* overflow: hidden; */
			/* height: 70px; */
		}
		
		li{
			width: 200px;
			height: 70px;
			background-color: #0f0;
			border: 1px solid #ccc;
			color: #fff;
			text-align: center;
			line-height: 70px;
			float: left;
		}
		
		.head .left{
			float: left;
		}
		
		.head .left>div{
			float: left;
			padding: 10px 20px;
			cursor: pointer;
		}
		
		.head .left>div:hover{
			color: #315efb;
		}
		
		.head .right{
			float: right;
		}
		
		.head .right>div{
			float: left;
			padding: 10px;
		}
		
		.head .right a{
			color: #222;
		}
		
		.head .right a:hover{
			color: #315efb;
		}
	</style>
</head>

<body>
	<pre>
			float：浮动    让元素显示在一行
			    left	元素向左浮动。
			    right	元素向右浮动。
			clear	指定不允许元素周围有浮动元素。  清除浮动
			    left	在左侧不允许浮动元素。
			    right	在右侧不允许浮动元素。
			    both	在左右两侧均不允许浮动元素。
			1.浮动元素会尽量向左或者向右移动，直到遇到另一个浮动元素或者是父级元素的边缘停止
			2.浮动元素之前的元素不受浮动的影响,浮动元素（文本）后的的元素会环绕浮动元素
			3.浮动元素会脱离标准文档流   不占位置
			
			BFC:块级上下文格式
			弊端：父元素高度塌陷
			清除浮动：
			1.在最后一个浮动元素后加一个空的块级元素,给它样式 clear:both
			2.给父元素设 overflow:hidden
			3.给父元素设高   height:100px
			4.给父元素设伪元素 :after :before
			ul:after{
				content:'';
				display:block;
				clear:both;
				height:0;
				visibility:hidden;
			}
		</pre>
		
		<ul>
			<li>11</li>
			<li>22</li>
			<li>33</li>
			<li>44</li>
			<li>55</li>
			<p style="clear: both;"></p>
		</ul>
		
		<div class="head">
			<div class="left">
				<div>新闻</div>
				<div>hao123</div>
				<div>地图</div>
				<div>贴吧</div>
				<div>视频</div>
				<div>图片</div>
				<div>网盘</div>
				<div>文库</div>
				<div>更多</div>
				<p style="clear: both;"></p>
			</div>
			<div class="right">
				<div>
					<a href="#">设置</a>
				</div>
				<div>
					<a href="#">登录</a>
				</div>
			</div>
			<p style="clear: both;"></p>
		</div>



	
	




	<div style="height: 200px;"></div>
</body>

</html>